<template>
  <div class="staff-container">
    <div class="search-wrap br-15">
      <div class="search">
        <el-input placeholder="請輸入搜索內容" v-model="input">
          <el-button slot="append" type="primary">
            <svg-icon icon-class="staff-search"></svg-icon>
          </el-button>
        </el-input>
        <el-button class="filter-btn btn">篩選</el-button>
        <el-button class="sort-btn btn">排序</el-button>
      </div>
      <div class="add-btn">
        <el-button type="primary" @click.native="addStaffDialogVisible = true">
          <svg-icon icon-class="staff-add"></svg-icon>
          新增員工
        </el-button>
      </div>
    </div>
    <div class="table-wrap br-20">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="員工信息">
          <template>
            <div class="staff-info-wrap">
              <svg-icon icon-class="staff-list-awatar"></svg-icon>
              <div>
                <div class="text-1">張三</div>
                <div class="text-2">策劃部-高級策劃師</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="聯繫方式">
          <template>
            <div class="text-1">13822226488</div>
            <div class="text-2">zhangsan@example.com</div>
          </template>
        </el-table-column>
        <el-table-column label="登錄賬戶">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="使用者層級">
          <template>
            <span class="hierarchy">員工</span>
          </template>
        </el-table-column>
        <el-table-column label="創建時間">
          <template>
            <div>2025-08-06</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="gotoDetail">查看</el-button>
            <el-button type="text" size="small" @click.native="editStaff">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div class="statistics">共24名員工 最近更新:2025-07-27 10:45</div>
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增员工 -->
    <el-dialog class="add-staff-dialog" :title="title" :visible.sync="addStaffDialogVisible" width="680px" top="1%">
      <el-form :model="addStaffFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="姓名">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入姓名"></el-input>
            </el-form-item>
            <el-form-item label="性別">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入性別"></el-input>
            </el-form-item>
            <el-form-item label="所屬部門">
              <el-select v-model="addStaffFormData.name" placeholder="請選擇所屬部門">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入職日期">
              <el-date-picker v-model="addStaffFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
            <el-form-item label="崗位">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入崗位"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="account-info">
          <h5>賬戶信息</h5>
          <div class="account">
            <el-form-item label="用戶名">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="自動生成/手動填寫"></el-input>
            </el-form-item>
            <el-form-item label="初始密碼">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入初始密碼"></el-input>
            </el-form-item>
            <el-form-item label="使用者層級">
              <el-select v-model="addStaffFormData.name" placeholder="請選擇層級">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="登入權限">
              <el-select v-model="addStaffFormData.name" placeholder="請選擇權限">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="contact-info">
          <h5>聯繫方式</h5>
          <div class="contact">
            <el-form-item label="手機號">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入手機號"></el-input>
            </el-form-item>
            <el-form-item label="電子郵箱">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入電子郵箱"></el-input>
            </el-form-item>
            <el-form-item label="電話">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入電話"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addStaffDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddStaff">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'staff-management',
  data() {
    return {
      input: '',
      tableData: [{}],
      title: '新增員工',
      addStaffDialogVisible: false,
      addStaffFormData: {}
    }
  },
  methods: {
    gotoDetail() {
      this.$router.push('/staff-detail')
    },
    editStaff() {
      this.title = '編輯員工'
      this.addStaffDialogVisible = true
    },
    submitAddStaff() {}
  }
}
</script>

<style scoped lang="less">
.staff-container {
  .search-wrap {
    padding: 19px 27px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    .search {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-input {
        margin-right: 15px;
        ::v-deep .el-input__inner {
          background: rgba(60, 88, 252, 0.12);
        }
        width: 225px;
      }
      .btn {
        background: rgba(60, 88, 252, 0.12);
      }
      ::v-deep .el-input-group__append {
        background: #3c58fc;
        border-radius: 0 5px 5px 0;
      }
    }
    .add-btn {
      margin-right: 17px;
    }
  }
  .table-wrap {
    background: #fff;
    padding: 35px 30px;
    .el-table {
      .hierarchy {
        display: inline-block;
        font-size: 16px;
        color: #3c58fc;
        text-align: center;
        background: rgba(60, 88, 252, 0.12);
        border-radius: 14px;
        line-height: 22px;
        padding: 3px 16px;
      }
      .staff-info-wrap {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        .svg-icon {
          font-size: 39px;
          margin-right: 10px;
        }
      }
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      align-items: center;
      .statistics {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
